<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="title">上门维修管理系统</view>
		</view>

		<!-- 订单页面 -->
		<view class="order-section">
			<view class="tabs">
				<view class="tab" :class="{ active: currentTab === 0 }" @click="switchTab(0)">全部</view>
				<view class="tab" :class="{ active: currentTab === 1 }" @click="switchTab(1)">待接单</view>
				<view class="tab" :class="{ active: currentTab === 2 }" @click="switchTab(2)">已接单</view>
				<view class="tab" :class="{ active: currentTab === 3 }" @click="switchTab(3)">待缴费</view>
				<view class="tab" :class="{ active: currentTab === 4 }" @click="switchTab(4)">已完结</view>
				<view class="tab" :class="{ active: currentTab === 5 }" @click="switchTab(5)">已取消</view>
			</view>

			<!-- 待接单 -->
			<view class="order-item">
				<view class="order-title">修补漏水</view>
				<view class="order-time">上门时间：2023-02-15 09:00</view>
				<view class="order-address">服务地址：天津市河西区永安道49号安德公寓1-302</view>
				<view class="order-status">待接单.......</view>
				<view class="order-actions">
					<button class="action-btn" type="default" size="mini" @click="goToModifyPage">修改预约</button>
					<button class="action-btn" type="default" size="mini" @click="goToOrderDetail">订单记录</button>
					<!-- 点击跳转 -->
					<button class="action-btn" type="default" size="mini" @click="goTocancel">取消预约</button>
				</view>
			</view>

			<!-- 已评价 -->
			<view class="order-item">
				<view class="order-title">修补墙皮</view>
				<view class="order-time">上门时间：2023-02-15 09:00</view>
				<view class="order-address">服务地址：天津市河西区永安道49号安德公寓1-302</view>
				<view class="order-rating">评定星级：★★★★★</view>
				<view class="order-actions">
					<button class="action-btn" type="default" size="mini" @click="goToOrderRecord">订单记录</button>
					<!-- 点击跳转 -->
				</view>

				<!-- 已接单 -->
				<view class="order-item">
					<view class="order-title">修补墙皮</view>
					<view class="order-time">上门时间：2023-02-15 09:00</view>
					<view class="order-address">服务地址：天津市河西区永安道49号安德公寓1-302</view>
					<view class="order-notice">师傅王刚强已接单，请保持电话畅通</view>
					<view class="order-actions">
						<button class="action-btn" type="default" size="mini" @click="goToModifyPage">修改预约</button>
						<button class="action-btn" type="default" size="mini" @click="goToOrderReceive">订单记录</button>
						<button class="action-btn" type="default" size="mini" @click="goTocancel">取消预约</button>
					</view>
				</view>

				<!-- 待缴费 -->
				<view class="order-item">
					<view class="order-title">修补墙皮</view>
					<view class="order-time">上门时间：2023-02-15 09:00</view>
					<view class="order-address">服务地址：天津市河西区永安道49号安德公寓1-302</view>
					<view class="order-paynotice">缴费单已生成，请及时查看缴费并缴费</view>
					<view class="order-actions">
						<button class="action-btn" type="default" size="mini" @click="goToValuation">评价</button>
						<button class="action-btn" type="default" size="mini" @click="goToOrderPayment">订单记录</button>
					</view>
				</view>

				<!--订单详情1-->
				<view class="order-actions">
					<button class="action-btn" type="default" size="mini" @click="goToDatail_one">订单详情</button>
				</view>
				<!--订单详情2-->
				<view class="order-actions">
					<button class="action-btn" type="default" size="mini" @click="goToDatail_two">订单详情2</button>
				</view>
				<!--订单详情3-->
				<view class="order-actions">
					<button class="action-btn" type="default" size="mini" @click="goToDatail_Three">订单详情3</button>
				</view>

				<!-- 没有更多内容 -->
				<view class="no-more">没有更多了</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchQuery: "", // 搜索内容绑定
				currentTab: 0
			};
		},
		methods: {
			switchTab(index) {
				this.currentTab = index;
			},
			// 处理搜索输入
			handleSearch() {
				console.log(this.searchQuery); // 这里可以添加搜索逻辑，例如调用 API 或过滤订单列表
			},
			// 跳转到待接单订单记录页面
			goToOrderDetail() {
				uni.navigateTo({
					url: '/pages/index/order/order-waithistory?orderId=12345' // 跳转到订单详情页面路径
				});
			},
			// 跳转到已评价订单记录页面
			goToOrderRecord() {
				uni.navigateTo({
					url: '/pages/index/order/order-record'
				});
			},
			// 跳转到已接单订单记录页面
			goToOrderReceive() {
				uni.navigateTo({
					url: '/pages/index/order/order-receive?orderId=12345'
				});
			},
			// 跳转到带缴费订单记录页面
			goToOrderPayment() {
				uni.navigateTo({
					url: '/pages/index/order/order-payment'
				});
			},
			// 跳转到订单详情页面
			goToDatail_one() {
				uni.navigateTo({
					url: '/pages/index/order/datails_one'
				});
			},
			// 跳转到订单详情2页面
			goToDatail_two() {
				uni.navigateTo({
					url: '/pages/index/order/datails_two'
				});
			},
			//跳转到订单详情3页面
			goToDatail_Three(){
				uni.navigateTo({
					url:'/pages/index/order/datails_Three'
				});
			},
			//跳转到修改预约
			goToModifyPage(){
				uni.navigateTo({
					url:'/pages/index/order/ModifyPage'
				});
			},
			goTocancel() {
				// 跳转到取消预约
				uni.navigateTo({
					url:'/pages/index/order/cancel'
				})
			},
			goToValuation() {
				//评价
				uni.navigateTo({
					url: '/pages/index/order/Valuation'
				});
			},
		},
	};
</script>

<style>
	.container {
		padding: 20px;
	}

	.navbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
	}

	.time,
	.battery {
		font-size: 14px;
	}

	.title {
		flex: 1;
		text-align: center;
		font-size: 16px;
		font-weight: bold;
	}

	.order-section {
		margin-top: 20px;
	}

	.tabs {
		display: flex;
		justify-content: space-around;
		padding: 10px 0;
		border-bottom: 1px solid #ccc;
	}

	.tab {
		padding: 10px;
	}

	.active {
		color: #007AFF;
	}

	.order-item {
		padding: 15px;
		border: 1px solid #ddd;
		margin-top: 10px;
		border-radius: 5px;
	}

	.order-title {
		font-size: 18px;
		font-weight: bold;
	}

	.order-time,
	.order-address {
		margin-top: 5px;
		font-size: 14px;
	}

	.order-rating {
		color: orange;
	}

	.order-status {
		color: darkblue;
	}

	.order-notice {
		color: green;
	}

	.order-paynotice {
		color: orangered;
	}

	.no-more {
		text-align: center;
		color: #ccc;
	}

	.order-action {
		margin-top: 10px;
		display: flex;
		justify-content: space-around;
	}

	.action-btn {
		color: black;
		font-size: 8px;
	}
</style>